<template>
    <div class="xtx-carousel">
      <div
        class="slider"
        v-for="(item, key) in lei"
        :key="key"
        v-show="imglist == key"
      >
        <RouterLink v-for="(i, k) in lei[key]" :key="k" to="/">
          <img :src="i.picture" alt="" />
          <p class="name ellipsis">{{ i.name }}</p>
          <p class="price">&yen;{{ i.price }}</p>
        </RouterLink>
      </div>
  
      <a href="javascript:;" class="carousel-btn prev" @click="prev()"
        ><i class="iconfont icon-angle-left" style="font-size:30px; color: #ccc;"></i
      ></a>
      <a href="javascript:;" class="carousel-btn next" @click="next()"
        ><i class="iconfont icon-angle-right"  style="font-size:30px; color: #ccc;"></i
      ></a>
      <div class="carousel-indicator">
        <span
          v-for="(item, key) in lei.length"
          :key="key"
          @click="changeImg(key)"
          :class="{ liang: key == imglist }"
        ></span>
      </div>
      <!-- {{lei}} -->
    </div>
  </template>
  
  <script>
  export default {
    props: ["tong"],
    data() {
      return {
        // img: [],
        imglist: 0,
        // times: null,
      };
    },
    methods: {
      prev() {
        if (this.imglist <= 0) {
          this.imglist = this.lei.length;
        }
        this.imglist--;
        clearInterval(this.times);
      },
      next() {
        if (this.imglist >= this.lei.length - 1) {
          this.imglist = -1;
        }
        this.imglist++;
      },
      // 点击控制圆点
    changeImg(key) {
      this.imglist = key;
    },
    },
    mounted() {},
    computed: {
      lei() {
        var sliders=[]
        const size = 4;
        const total = Math.ceil(this.tong.length / size);
        for (let i = 0; i < total; i++) {
          sliders.push(this.tong.slice(i * size, (i + 1) * size));
        }
        return sliders
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  @import "@/assets/css/variables.scss";
  .xtx-carousel {
    width: 100%;
    height: 100%;
    min-width: 1240px;
    min-height: 350px;
    position: relative;
    .carousel {
      &-body {
        width: 100%;
        height: 100%;
      }
      &-item {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: opacity 0.5s linear;
        &.fade {
          opacity: 1;
          z-index: 1;
        }
        img {
          width: 100%;
          height: 100%;
        }
      }
      &-indicator {
        position: absolute;
        left: 0;
        bottom: 20px;
        z-index: 2;
        width: 100%;
        text-align: center;
        span {
          display: inline-block;
          width: 12px;
          height: 12px;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 50%;
          cursor: pointer;
          ~ span {
            margin-left: 12px;
          }
          &.active {
            background: #fff;
          }
        }
      }
      &-btn {
        width: 44px;
        height: 44px;
        color: rgb(150, 150, 150);
        background: #fff;
        border-radius: 50%;
        position: absolute;
        top: 135px;
        z-index: 2;
        text-align: center;
        line-height: 44px;
        opacity: 1;
        transition: all 0.5s;
        &.prev {
          left: 20px;
          top: 100px;
        //   background: red;
          // margin-left: 240px;
        }
        &.next {
          right: 20px;
          top: 100px;
        }
      }
    }
    &:hover {
      .carousel-btn {
        opacity: 1;
      }
    }
  }
  .liang {
    background-color: #27ba9b !important;
  }
  
  .slider {
    display: flex;
    justify-content: space-around;
    padding: 0 40px;
    > a {
      width: 240px;
      text-align: center;
      img {
        padding: 20px;
        width: 230px !important;
        height: 230px !important;
      }
      .name {
        font-size: 16px;
        color: #666;
        padding: 0 40px;
      }
      .price {
        font-size: 16px;
        color: red;
        margin-top: 15px;
      }
    }
  }
  :deep(.xtx-carousel) {
    height: 380px;
    .carousel {
      &-indicator {
        bottom: 30px;
        span {
          &.active {
            background: $xtxColor;
          }
        }
      }
      &-btn {
        top: 110px;
        opacity: 1;
        background: rgba(0, 0, 0, 0);
        color: #ddd;
        i {
          font-size: 30px;
        }
      }
    }
  }
  </style>
  